<template>
    <div class="image-upload-container">
      <div 
        class="drop-zone" 
        @dragover.prevent 
        @drop="handleDrop" 
        @dragenter.prevent
      >
        <p>拖拽图片文件夹到此区域</p>
      </div>
  
      <!-- 图片轮播 -->
      <el-carousel v-if="images.length > 0" type="card" height="400px" autoplay>
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt="image" class="carousel-image"/>
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  <script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 存储图片路径
const images = ref([]);

// 处理拖拽文件夹
const handleDrop = (event) => {
  const files = event.dataTransfer.files;

  // 仅支持文件夹拖拽
  if (files.length === 0) return;

  // 获取文件夹路径
  const folder = files[0].webkitRelativePath.split('/')[0]; 

  // 遍历文件夹中的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    if (file.type.startsWith('image/')) { // 判断是否为图片文件
      const imgUrl = URL.createObjectURL(file); // 创建图片链接
      images.value.push(imgUrl); // 存储图片路径
    }
  }

  // 图片数量更新后，展示提示
  if (images.value.length > 0) {
    ElMessage({ message: '图片上传成功！', type: 'success' });
  }
};
</script>

<style scoped>
.image-upload-container {
  padding: 20px;
  text-align: center;
}

.drop-zone {
  width: 100%;
  height: 200px;
  border: 2px dashed #409EFF;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f7fc;
  margin-bottom: 20px;
  color: #409EFF;
  font-size: 18px;
}

.carousel-image {
  width: 100%;
  height: auto;
}
</style>
